Ever wanted to view source of a webpage from an iPad or iPhone? Unfortunately, mobile Safari doesn’t include the feature on it’s own and does not yet have a mobile web inspector toolkit built-in, but with the help of a custom bookmarklet you can view source of any web page right in iOS and iPadOS.

This article will show you how you can get set up so that you can view source in Safari for iPad and iPhone by using a bookmarklet and javascript trick.

One important thing to note is that the javascript being used here sends the page you are viewing source to over to the michelsen.dk server for processing. If you’re not comfortable with that there are other solutions out there, but they won’t highlight the syntax and aren’t nearly as elegant overall.

For example, you can use the Javascript below as a bookmarklet to view source as well which will not process through a remote server, but it does not use syntax highlighting:

javascript:(function(){var a=window.open('about:blank').document;a.write('Source of '+location.href+'');a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap';b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();

A similar tip utilizes an edited bookmark to let you run Firebug with Mobile Safari on an iPhone or iPad too, which may be a bit more useful for some web developers.

This awesome tip comes from Michelsen.dk. Found via Twitter, you can follow us there too

Who knows, maybe one day Safari in iOS and iPadOS will get a native ability to view source? Until then, you’ll have to rely on this party apps or tools like this.

This worked fine in testing but some users report different results on various later versions of Safari and iOS. Let us know in the comments below what works for you and what iOS version and iPad or iPhone you are using.